<template>
  <div id="monDeviceType">
    <ul>
      <li>
        <img src="../../assets/图层 2.png" alt="" />
        <p>半球</p>
        <div>
          <p>在线:{{ monitoringOnline }}</p>
          <p>离线:{{ monitoringOffline }}</p>
          <p>故障:{{ fault }}</p>
        </div>
      </li>
      <li>
        <img src="../../assets/图层 2.png" alt="" />
        <p>枪机</p>
        <div>
          <p>在线:{{ monitoringOnline1 }}</p>
          <p>离线:{{ monitoringOffline1 }}</p>
          <p>故障:{{ fault1 }}</p>
        </div>
      </li>
      <!-- <li>
        <img src="../../assets/图层 2.png" alt="" />
        <p>球机</p>
        <div>
          <p>在线:{{ monDeviceTypeAll }}</p>
          <p>离线:{{ monDeviceTypeAll }}</p>
          <p>故障:{{ monDeviceTypeAll }}</p>
        </div>
      </li> -->
    </ul>
  </div>
</template>
<script scoped>
import { _monitoringNum } from '../../http/api'
export default {
  data() {
    return {
      fault: 0, //半球故障
      monitoringOnline: 0, //半球在线
      monitoringOffline: 0, //半球离线
      fault1: 0, //枪击故障
      monitoringOnline1: 0, //枪击在线
      monitoringOffline1: 0, //枪击离线
    };
  },
  methods: {
    // 获取安防态势数据
    getmonitoringNum() {
      _monitoringNum()
        .then((res) => {
          console.log(res);
          // this.monitoringNumAll = res.data[1].totalCount;
          this.fault = res.data[1].totalCount - res.data[1].onlineCount;
          this.monitoringOnline = res.data[1].onlineCount;
          this.monitoringOffline = res.data[1].offlineCount;
          // this.monitoringNumAll1 = res.data[2].totalCount;
          this.fault1 = res.data[2].totalCount - res.data[2].onlineCount;
          this.monitoringOnline1 = res.data[2].onlineCount;
          this.monitoringOffline1 = res.data[2].offlineCount;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 自适应
    winSize() {
      var ratioY = window.innerHeight / 188;
      var ratioX = window.innerWidth / 370;
      window.document.body.style.transform = "scale(" + ratioY + ")";
      window.document.body.style.transformOrigin = "0px 0px";
      // this.getmonitoringNum();
    },
  },
  mounted() {
    this.getmonitoringNum();
    this.winSize();
    window.onresize = () => {
      return (() => {
        var ratioX = window.innerWidth / 370;
        var ratioY = window.innerHeight / 188;
        window.document.body.style.transform = "scale(" + ratioY + ")";
        window.document.body.style.transformOrigin = "0px 0px";
      })();
    };
  },
};
</script>
<style scoped lang="less">
#monDeviceType {
  display: flex;
  // background: rgba(0, 0, 0, 0.6);
  width: 370px;
  height: 170px;
  padding: 0.2rem 0.15rem;
  box-sizing: border-box;
}

ul {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: space-around;
  align-items: center;
}

li {
  position: relative;
  text-align: center;
  color: #fff;

  div {
    margin-top: 6px;
  }
}

p {
  font-size: 14px;
  font-weight: bold;
}

img {
  width: 60px;
  height: 60px;
}

li h5 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 38% 0;
  font-weight: 600;
  font-size: 22px;
}
</style>
